"use strict";
var Back;
(function (Back) {
    Back[Back["#ccc"] = 1] = "#ccc";
    Back[Back["green"] = 2] = "green";
    Back[Back["red"] = 3] = "red";
})(Back || (Back = {}));
let num = 0;
const MenuArr = (arr, num) => {
    num += 1;
    const menuStr = arr.map(item => {
        return `
            <div style="background: ${Back[num]};border-bottom:1px solid #ccc">
                <p class="btn"> ${item.title} </p>
                ${!item.children ? '' : `<div class="menuItem" style="transition: all 3s;">${MenuArr(item.children, num)}</div>`}
            </div>
        `;
    }).join('');
    return menuStr;
};
// 渲染
const render = () => {
    // 非空断言
    const BoxDom = document.querySelector('.box');
    // 渲染到页面上
    BoxDom.innerHTML = MenuArr(menu, num);
    bindEvent();
};
// 给第一项添加点击事件
const bindEvent = () => {
    const pDom = Array.from(document.querySelectorAll('.btn'));
    pDom.forEach(item => {
        item.addEventListener('click', (e) => {
            if (e.target.nextElementSibling) {
                if (e.target.nextElementSibling.style.display === 'block') {
                    e.target.nextElementSibling.style.display = 'none';
                }
                else {
                    e.target.nextElementSibling.style.display = 'block';
                }
            }
        });
    });
};
render();
